<template>
  <div id="Nav">
    <!-- 公共下导航 -->
    <ul class="Nav-bottom">
      <li>
        <router-link  to="/home">
          <p class="icon iconfont">&#xe681;</p>
          <p class="write">首页</p>
        </router-link>
      </li>
      <li>
        <router-link to="/sport">
          <p class="icon iconfont">&#xe610;</p>
          <p class="write">健身</p>
        </router-link>
      </li>
      <li>
        <router-link to="/found">
          <p class="icon iconfont icon-xiaodengpao"></p>
          <p class="write">发现</p>
        </router-link>
      </li>
      <li>
        <router-link to="/mine">
          <p class="icon iconfont">&#xe608;</p>
          <p class="write">我的</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {}
};
</script>

<style lang="less" scoped>
@color: rgb(254, 217, 6);
.Nav-bottom {
  padding-left: 0.2rem;
  width: 100%;
  height: 1.2rem;
  background: #333;
}
#Nav a {
  color: rgba(238, 238, 238, 0.849);
  text-align: center;
  p {
    font-size: 0.4rem;
    // position: relative;
    // top: 0.3rem;
  }
  .write {
    font-size: 0.3rem;
  }
}
#Nav {
  width: 100%;
  position: fixed;
  bottom: 0;
  margin: 0 auto;
  li {
    float: left;
    padding: 0.2rem 0.6rem 0 0.6rem;
  }
}
.active p {
  color: @color;
}
</style>